import React from 'react'
import { UdDetail, http, UdPageHeader, routeUtils } from '@/lib';
import { Button, Table } from 'antd'
import apis from '@/apis/PurchaseManage'
import dayjs from 'dayjs';
import './index.scss';
import { RouteComponentProps } from 'react-router-dom';


//接口字段映射
const fieldMap = {
  /**
   * 基本信息
   */
  //订单编号
  orderId: "Number",
  //订单类型
  orderType: "SalesOrderTypeName",
  //订单状态
  orderStatus: "OrderStatusName",
  //审批状态
  approvalStatus: "OrderStatusName",
  //定价日期
  pricingDate: "PricingDate",
  //销售组织
  salesOrganization: "SalesOrganizationName",
  //销售渠道
  salesChannels: "DistributionChannelName",
  //下单时间
  time: "AddTime",

  /**
   * 财务信息
   */
  //订单数量汇总
  number: "TotalAmount",
  //应付金额
  amountsPayable: "Money",
  //销售金额
  salesAmount: "SalesMoney",
  //实收保证金金额
  marginAmount: "MarginMoney",
  //费用兑现金额
  expensesAgainstCash: "ExpenseMoney",
  //折扣金额
  discountAmount: "DiscountMoney",

  /**
   * 物流信息
   */
  //送达方
  sendTo: "ReceiveCustomerName",
  //配送方式
  deliveryMethod: "DeliveryAddressTypeName",
  //运输方式
  modeOfTransport: "TransportTypeName",
  //计划起运日
  startSendDay: "PlanDeliveryDate",
  //交货地址
  address: "RegionPathAddress",

  /**
   * 发票信息
   */
  //发票类型
  invoiceType: "invoiceType",
  //开票金额
  invoiceAmount: "InvoiceMoney",
  //已开票金额
  haveInvoiceAmount: "TotalSumMoney",
  //未开票金额
  dontInvoiceAmount: "UnbilledMoney",

  /**
   * 商品明细
   */
  //商品编码
  commodityId: "ProductId",
  //商品名称
  commodityName: "ProductName",
  //商品数量
  commodityNumber: "Amount",
  //标准价格
  standardPrice: "StandardPrice",
  //商品单价
  commodityUnitPrice: "Price",
  //计价单位
  salesUnit: "PricingUnit",
  //计量单位
  unitOfMeasurement: "MeasureUnitName",
  //货币金额
  monetaryAmount: "Money",
  //商品开票金额
  commodityInvoiceAmount: "InvoceMoney",
  //商品折扣金额
  commodityDiscountAmount: "DiscountMoney",
  //商品费用兑现金额
  commodityExpensesAgainstCash: "ExpenseMoney",
  //商品保证金金额
  commodityMarginAmount: "MarginMoney",
  //商品备注
  commodityRemark: "ItemNote",

  /**
   * 备注
   */
  remark: "Caption",

}

interface IProps extends RouteComponentProps<{
  id: string
}> {
  
}

export default class Details extends React.Component<IProps, any> {

  state = {
    title: '进货订单详情',
    dataSource: {
      ItemList: []
    },
    isLoading: false
  }

  componentDidMount() {
    this.setState({ isLoading: true })
    const { dealerCode } = routeUtils.searchStringToObject(this.props.location.search, { dealerCode: '' })
    http.get(apis.getPurchaseDetails, { params: { Number: this.props.match.params.id, dealerCode } }).then(res => {
      Object.keys(res.data).forEach(item => {
        if (res.data[item] === 0) {
          res.data[item] = "0"
        }
      })
      this.setState({ dataSource: res.data, isLoading: false })
    }).catch(err => {
      this.setState({ isLoading: false })
    })
  }

  //交货单明细
  private handleDeliveryNoteDetails = () => {
    this.props.history.push('/purchase-management/delivery/' + this.props.match.params.id)
  }

  render() {
    return <div className="purchase-details-box">
      <UdPageHeader title="订单详情" onBack />
      {/* <div style={{
        display: "flex",
        flexFlow: "row nowrap",
        justifyContent: "space-between",
        alignItems: "center",
        border: "1px solid #e8e8e8",
        padding: "12px 10px"
      }}>
        <div style={{ fontSize: "14px", fontWeight: 500 }}><span>当前订单状态：</span>{this.state.dataSource[fieldMap.orderStatus]}</div>
        <Button onClick={() => { this.handleDeliveryNoteDetails() }}>交货单</Button>
      </div> */}
      <UdDetail title="基本信息" dataSource={this.state.dataSource} items={[
        { title: '订单编号', dataIndex: fieldMap.orderId },
        { title: '订单类型', dataIndex: fieldMap.orderType },
        { title: '订单状态', dataIndex: fieldMap.orderStatus },
        { title: '定价日期', dataIndex: fieldMap.pricingDate, render: (text) => dayjs(text).format("YYYY-MM-DD") },
        { title: '销售组织', dataIndex: fieldMap.salesOrganization },
        { title: '销售渠道', dataIndex: fieldMap.salesChannels },
        { title: '下单时间', dataIndex: fieldMap.time, render: (text) => dayjs(text).format("YYYY-MM-DD") }
      ]} />
      <UdDetail title="财务信息" dataSource={this.state.dataSource} items={[
        { title: '订单销售金额', dataIndex: fieldMap.salesAmount },
        { title: '应付金额', dataIndex: fieldMap.amountsPayable },
        { title: '实收保证金金额', dataIndex: fieldMap.marginAmount },
        { title: '费用兑现金额', dataIndex: fieldMap.expensesAgainstCash },
        { title: '订单数量汇总', dataIndex: fieldMap.number },
        { title: '折扣金额', dataIndex: fieldMap.discountAmount },
      ]} />
      <UdDetail title="物流信息" dataSource={this.state.dataSource} items={[
        { title: '送达方', dataIndex: fieldMap.sendTo },
        { title: '配送方式', dataIndex: fieldMap.deliveryMethod },
        { title: '运输方式', dataIndex: fieldMap.modeOfTransport },
        { title: '计划起运日', dataIndex: fieldMap.startSendDay, render: (text) => dayjs(text).format("YYYY-MM-DD") },
        { title: '交货地址', dataIndex: fieldMap.address },
      ]} />
      <UdDetail title="发票信息" dataSource={this.state.dataSource} items={[
        { title: '发票类型', dataIndex: fieldMap.invoiceType },
        { title: '开票金额', dataIndex: fieldMap.invoiceAmount },
        { title: '已开票金额', dataIndex: fieldMap.haveInvoiceAmount },
        { title: '未开票金额', dataIndex: fieldMap.dontInvoiceAmount },
      ]} />
      <Table
        className='nowarp'
        loading={this.state.isLoading}
        scroll={{ x: true }}
        pagination={false}
        dataSource={this.state.dataSource.ItemList}
        rowKey={(record, index) => index + ""}
        columns={[
          {
            dataIndex: "sort",
            title: "序号",
            width: "50px",
            render: (text, record, index) => index + 1
          },
          {
            dataIndex: fieldMap.commodityId,
            title: "商品编码",

          },
          {
            dataIndex: fieldMap.commodityName,
            title: "商品名称"
          },
          {
            dataIndex: fieldMap.commodityNumber,
            title: "商品数量",
          },
          {
            dataIndex: fieldMap.standardPrice,
            title: "标准价格",
          },
          {
            dataIndex: fieldMap.commodityUnitPrice,
            title: "商品单价",
          },
          {
            dataIndex: fieldMap.salesUnit,
            title: "计价单位",
          },
          {
            dataIndex: fieldMap.unitOfMeasurement,
            title: "计量单位",
          },
          {
            dataIndex: fieldMap.monetaryAmount,
            title: "货币金额",
            align: 'right'
          },
          {
            dataIndex: fieldMap.commodityInvoiceAmount,
            title: "开票金额",
            align: 'right'
          },
          {
            dataIndex: fieldMap.commodityDiscountAmount,
            title: "折扣金额",
            align: 'right'
          },
          {
            dataIndex: fieldMap.commodityExpensesAgainstCash,
            title: "费用兑现金额",
            align: 'right'
          },
          {
            dataIndex: fieldMap.commodityMarginAmount,
            title: "保证金金额",
            align: 'right'
          },
          {
            dataIndex: fieldMap.commodityRemark,
            title: "备注",
          },
        ]}
      />
      <UdDetail title="备注" dataSource={this.state.dataSource} items={[
        { title: '备注', dataIndex: fieldMap.remark },
      ]} />
    </div>
  }

}
